<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>Layui</title> 
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../layui/css/layui.css" media="all">
<link rel="stylesheet" href="../bootstrap/bootstrap.css" media="all">
<script src="../layui/layui.js" charset="utf-8"></script>
<script src="../js/jquery.js"></script>
<script src="../js/global.js" charset="utf-8"></script>

<style>
.layui-form-label {
	width: 100px;
}

.sous {
	font-size: 30px;
	width: 150px;
	margin-left: 5px;
	margin-top: -10px;
	padding-left: 5px;
}

.layui-table-tool-temp {
	padding-right: 5px;
}
.tabimg{
	width: 80px;
	height: 80px;
}
tbody .layui-table-cell{
	height: 80px;
}
</style>
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>

<body>
<div class="demoTable" style="margin-top: 10px;margin-left: 20px;" id="demoTable">
<button class="layui-btn" onclick="openPage('./equadd.html','设备添加')">添加</button>
  <button class="layui-btn layui-btn-disabled" data-type="edit" id="tabedit">编辑</button>
<button class="layui-btn layui-btn-danger layui-btn-disabled" data-type="del" id="tabdel">删除</button> 
搜索名称：
<div class="layui-inline">
	<input class="layui-input" name="name" id="name" autocomplete="off">
</div>
所属
<div class="layui-inline">
	<select name="menuid" id="menuid" class="layui-input" style="width: 230px;">
		<option value="">全部</option>
	</select>
</div>

<button class="layui-btn" onclick="reload()">搜索</button>
</div>
<table class="layui-hide" id="test" lay-filter="test" style="margin-top: -40px;z-index: 99px;"> </table>

<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->

<script>
var table = null;

layui.use('table', function() {
	initlist();
	table = layui.table;
	var util = layui.util;
	table.render({
		elem: '#test',
		//toolbar: '#demoTable', //开启头部工具栏，并为其绑定左侧模板
		url: '/techshine/equ/queryListByPage',
		title: '设备数据表',
		cols: [
			[{type: 'checkbox',fixed: 'left'},
				{field: 'id',title: 'ID',fixed: 'left',unresize: true,sort: true},
				{field: 'imgurl',title: '设备',
					templet: function(row) {
						return '<img src="'+row.imgurl+'" class="tabimg" />'
					}
				},
				{field: 'name',title: '名称',edit: 'text'}, 
				{field: 'category',title: '类别',edit: 'text'}, 
				{field: 'model',title: '型号',edit: 'text'}, 
				{field: 'seq',title: '排序',edit: 'text'}, 
				{field: 'code',title: '所属',edit: 'text'}
				
			]
		],
		page: true,
		id: 'testReload',
		done: function(res, curr, count) {

		}
	});

	table.on('checkbox(test)', function(obj) {
		var checkStatus = table.checkStatus('testReload'); //idTest 即为基础参数 id 对应的值
		if(checkStatus.data.length == 0) {
			$("#tabdel").addClass("layui-btn-disabled")
			$("#tabedit").addClass("layui-btn-disabled")
		} else if(checkStatus.data.length == 1) {
			$("#tabdel").removeClass("layui-btn-disabled")
			$("#tabedit").removeClass("layui-btn-disabled")
		} else {

			$("#tabdel").removeClass("layui-btn-disabled")
			$("#tabedit").addClass("layui-btn-disabled")
		}

		//console.log(obj); //当前行的一些常用操作集合
		//console.log(obj.checked); //当前是否选中状态 
		//console.log(obj); //选中行的相关数据
		//console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
	});
	//监听单元格编辑
	table.on('edit(test)', function(obj) {
		//var value = obj.value; //得到修改后的值
		//var	data = obj.data; //得到所在行所有键值
		//var	field = obj.field; //得到字段
		var dataajax = {};
		dataajax.id = obj.data.id;
		dataajax[obj.field] = obj.value;
		// layer.alert('[ID: '+ data.id +'] ' + field + ' 字段更改值为：'+ value);
		$.ajax({
			type: "get",
			url: "/techshine/equ/update",
			data: dataajax,
			async: true,
			success: function(res) {

				//成功的话关闭页面
			}
		});
	});
					  
	var $ = layui.$, active = {
    edit: function(){ //获取选中数据
      	var checkStatus = table.checkStatus('testReload');
      	var data = checkStatus.data;
		if(data.length==1){
			openPage('equadd.html?id='+data[0].id,'设备编辑')
		}else{
			layer.msg('请选择一个要编辑的数据');
		}
      	
   },del: function(){ //获取选中数目
      var checkStatus = table.checkStatus('testReload');
      var data = checkStatus.data;
		if(data.length>=1){
			var arrstr="";
			$.each(data, function(i,obj) {
				arrstr+=obj.id+","
			});
			deleteData(arrstr.substr(0,arrstr.length-1))
    	}else{
    		layer.msg('请选中要删除的数据');
    	}
	}};

  $('.demoTable .layui-btn').on('click', function(){
    var type = $(this).data('type');
    active[type] ? active[type].call(this) : '';
  }); 

});

function reload() {
	//执行重载
	table.reload('testReload', {
		page: {
			curr: 1 //重新从第 1 页开始
		},
		where: {
			name: $("#name").val(),
			menuid: $("#menuid").val()
		}
	});
}

function deleteData(ids) {
	$.ajax({
		type: "get",
		url: '/techshine/equ/delmore?ids=' + ids,
		async: true,
		success: function() {
			reload();
		}
	});
}
function initlist(){
	$.ajax({
		type:"get",
		url: '/techshine/menu/queryList?menutype=2',
		async:false,
		success:function(res){
			var liststr="<option value=''>全部</option>";
			$.each(res.result, function() {
				liststr+='<option value="'+this.id+'">'+this.name+'</option>'
			});
			$("#menuid").html(liststr);
		
		}
	});
}
</script>

</body>

</html>